.roll-container {
	height: 72rpx;
	position: relative;
	width: 100%;

	.roll-container-swiper {
		height: 100%;
		width: 100%;
		overflow: hidden;
	}

	.roll-item {
		width: auto;
		box-sizing: border-box;
		animation-duration: 10s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		display: flex;
		transform: translate3d(100%, 0, 0);

		&.running {
			animation-play-state: running;
		}

		&.paused {
			animation-play-state: paused;
		}

		view {
			display: flex;
			background: rgba(0, 0, 0, 0.42);
			border-radius: 24rpx;
			padding: 12rpx 24rpx;
			font-size: 24rpx;
			color: #ffffff;
			line-height: 24rpx;

			text {
				&.name {
					color: #FA8A4B;
				}
			}
		}
	}
}

@keyframes loop {
	0% {
		transform: translate3d(100%, 0, 0);
	}

	100% {
		transform: translate3d(-100%, 0, 0);
	}
}